<template>
  <div class="tags-container">
    tag盒子 -->
    <div class="tags-box" ref="tagBox">
      <div class="tags-list" ref="tagsList" @mousewheel="handleMousewheel" @mouseup="handleMouseUp"
           @mousemove="handleMouse" @mousedown="handleMouseStart" @touchup="handleMouseUp" @touchmove="handleMouse"
           @touchstart="handleMouseStart">
        <div v-for="(item,index) in tagList"
             :key="index" :name="item.value" :class="{'is-active':item.value === nowTagValue}"
             @click="openUrl(item)" @contextmenu.prevent="openMenu(item,$event)"
             ref="tagsPageOpened" class="tag-item">
          <span class="icon-yuan tag-item-icon"></span>
          <span class="tag-text">{{item.label}}</span>
          <i class="el-icon-close tag-close" @click.stop="closeTag(item)" v-if="item.close"></i>
        </div>
      </div>
      <el-dropdown class="tags-menu pull-right">
        <el-button type="primary" size="mini">
          更多
          <i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="closeOthersTags">关闭其他</el-dropdown-item>
          <el-dropdown-item @click.native="closeAllTags">关闭全部</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
  import {resolveUrlPath, setUrlPath} from '@/util/util'
  import {mapGetters} from 'vuex'

  export default {
    name: 'tags',
    data() {
      return {
        visible: false,
        tagBodyLeft: 0,
        lock: false,
        startX: 0,
        startY: 0,
        endX: 0,
        endY: 0,
        top: 0,
        left: 0,
        selectedTag: {}
      }
    },
    created() {
    },
    mounted() {
      this.init()
    },
    watch: {
      $route(to) {
        this.init()
      },
      visible(value) {
        if (value) {
          document.body.addEventListener('click', this.closeMenu)
        } else {
          document.body.removeEventListener('click', this.closeMenu)
        }
      },
      tagBodyLeft(value) {
        this.$refs.tagsList.style.left = value + 'px'
      }
    },
    computed: {
      ...mapGetters(['tagWel', 'tagList', 'isCollapse', 'tag']),
      nowTagValue: function () {
        return setUrlPath(this.$route)
      },
      tagListNum: function () {
        return this.tagList.length !== 0
      }
    },
    methods: {
      init() {
        this.refsTag = this.$refs.tagsPageOpened
        setTimeout(() => {
          this.refsTag.forEach((item, index) => {
            if (this.tag.value === item.attributes.name.value) {
              const tag = this.refsTag[index]
              this.moveToView(tag)
            }
          })
        }, 1)
      },
      handleMouseUp(e) {
        this.lock = false
      },
      handleMouseStart(e) {
        this.lock = true
        if (e.clientX && e.clientY) {
          this.startX = e.clientX
          this.startY = e.clientY
        } else {
          this.startX = e.changedTouches[0].pageX
          this.startY = e.changedTouches[0].pageY
        }
      },
      handleMouse(e) {
        const boundaryStart = 0, boundaryEnd = this.$refs.tagsList.offsetWidth - this.$refs.tagBox.offsetWidth + 100
        if (!this.lock) {
          return
        }
        // 鼠标滑动
        if (e.clientX && e.clientY) {
          this.endX = e.clientX
          this.endY = e.clientY
          // 触摸屏滑动
        } else {
          // 获取滑动屏幕时的X,Y
          this.endX = e.changedTouches[0].pageX
          this.endY = e.changedTouches[0].pageY
        }
        // 获取滑动距离
        let distanceX = this.endX - this.startX
        const distanceY = this.endY - this.startY
        // 判断滑动方向——向右滑动
        distanceX = parseInt(distanceX * 0.8)
        if (distanceX > 0 && this.tagBodyLeft < boundaryStart) {
          this.tagBodyLeft = this.tagBodyLeft + distanceX
          // 判断滑动方向——向左滑动
        } else if (distanceX < 0 && this.tagBodyLeft >= -boundaryEnd) {
          this.tagBodyLeft = this.tagBodyLeft + distanceX
        }
      },
      handleMousewheel(e) {
        const step = 0.8 * 90 // 一个tag长度
        const boundaryStart = 0, boundaryEnd = this.$refs.tagsList.offsetWidth - this.$refs.tagBox.offsetWidth + 100
        // Y>0向左滑动
        if (e.deltaY > 0 && this.tagBodyLeft >= -boundaryEnd) {
          this.tagBodyLeft = this.tagBodyLeft - step
          // Y<0向右滑动
        } else if (e.deltaY < 0 && this.tagBodyLeft < boundaryStart) {
          this.tagBodyLeft = this.tagBodyLeft + step
        }
      },
      openMenu(tag, e) {
        if (this.tagList.length === 1) {
          return
        }
        this.visible = true
        this.selectedTag = tag
        this.left = e.clientX
        this.top = e.clientY
      },
      closeOthersTags() {
        this.$store.commit('DEL_TAG_OTHER')
      },
      closeMenu() {
        this.visible = false
      },
      closeAllTags() {
        this.$store.commit('DEL_ALL_TAG')
        this.$router.push({
          path: resolveUrlPath(this.tagWel.value),
          query: this.tagWel.query
        })
      },
      moveToView(tag) {
        if (tag.offsetLeft < -this.tagBodyLeft) {
          // 标签在可视区域左侧
          this.tagBodyLeft = -tag.offsetLeft + 10
        } else if (
          tag.offsetLeft + 10 > -this.tagBodyLeft &&
          tag.offsetLeft + tag.offsetWidth <
          -this.tagBodyLeft + this.$refs.tagBox.offsetWidth
        ) {
          // 标签在可视区域
        } else {
          // 标签在可视区域右侧
          this.tagBodyLeft = -(
            tag.offsetLeft -
            (this.$refs.tagBox.offsetWidth - 100 - tag.offsetWidth) +
            20
          )
        }
      },
      openUrl(item) {
        this.$router.push({
          path: resolveUrlPath(item.value, item.label),
          query: item.query
        })
      },
      eachTag(tag) {
        for (let key in this.tagList) {
          if (this.tagList[key].value === tag.value) {
            return key
          }
        }
        return -1
      },
      closeTag(item) {
        const key = this.eachTag(item)
        let tag
        this.$store.commit('DEL_TAG', item)
        if (item.value === this.tag.value) {
          tag = this.tagList[key === 0 ? key : key - 1]
          this.openUrl(tag)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>


